<template>
  <div class="bigBox">
    <div class="container">
      <div class="head">
        <i class="icon" @click="headEvt"></i>
        <span class="wxName">cherry</span>
        <span class="integral">我的积分：{{value}}</span>
      </div>
      <div class="headList">
        <dl @click="$router.push('/my/child/Cdiary')">
          <dt>0</dt>
          <dd>日记</dd>
        </dl>
        <dl @click="$router.push('/my/child/Collection')">
          <dt>0</dt>
          <dd>收藏</dd>
        </dl>
        <dl @click="$router.push('/my/child/coupon')">
          <dt>0</dt>
          <dd>优惠券</dd>
        </dl>
        <dl @click="$router.push({path:'/my/child/integral',query:{
          value:value
        }})">
          <dt>{{value}}</dt>
          <dd>积分</dd>
        </dl>
      </div>
      <div class="orderList">
        <ul class="list">
          <li class="product">商品订单</li>
          <li class="all" @click="orderEvt">全部订单</li>
        </ul>
        <div class="productList">
          <dl>
            <dt><img src="../../assets/fk.jpg" /></dt>
            <dd @click="payEvt">待付款</dd>
          </dl>
          <dl>
            <dt><img src="../../assets/fh.jpg" /></dt>
            <dd @click="goodsEvt">待发货</dd>
          </dl>
          <dl>
            <dt><img src="../../assets/wc.jpg" /></dt>
            <dd @click="receivingEvt">待收货</dd>
          </dl>
          <dl>
            <dt><img src="../../assets/sh.jpg" alt="" /></dt>
            <dd @click="afterEvt">退款/售后</dd>
          </dl>
        </div>
      </div>
      <div class="orderList order">
        <ul class="list">
          <li class="product">项目订单</li>
          <li class="all" @click="orderEvent">全部订单</li>
        </ul>
        <div class="productList">
          <dl>
            <dt><img src="../../assets/fk.jpg" /></dt>
            <dd @click="payEvt2">待付款</dd>
          </dl>
          <dl>
            <dt><img src="../../assets/fh.jpg" /></dt>
            <dd @click="writeEvt">待核销</dd>
          </dl>
          <dl>
            <dt><img src="../../assets/wc.jpg" /></dt>
            <dd @click="finishEvt">已完成</dd>
          </dl>
          <dl>
            <dt><img src="../../assets/sh.jpg" alt="" /></dt>
            <dd @click="afterEvt2">退款/售后</dd>
          </dl>
        </div>
      </div>
      <span class="line"></span>
      <section class="nameList">
        <ul>
          <li @click="signEvt">
            <img src="../../assets/编组(3).png" />签到
          </li>
          <li @click="userEvt">
            <img src="../../assets/编组(2).png" />
            用户协议
          </li>
          <li @click="lawEvt">
            <img src="../../assets/1.jpg" />
            法律声明
          </li>
          <li @click="experienceEvt">
            <img src="../../assets/2.jpg" />用户体验
          </li>
          <li  @click="PrivacyEvt">
            <img src="../../assets/编组.png" />隐私协议
          </li>
          <li @click="contactEvt"><img src="../../assets/编组(4).png" />联系客服</li>
          <li @click="news">
            <img src="../../assets/编组(1).png" />消息
          </li>
        </ul>
      </section>
    </div>
      <tebber :active="active"></tebber>
      <van-popup v-model="show" position="bottom" :style="{ height: '70%' }" >
        <img src="" alt="">
        <van-uploader :after-read="afterRead"/>
      </van-popup>
      <van-popup class="van-popup"
        v-model=" user "
        round
        position="bottom"
        :style="{ height: '80%' }">
        <div class="userAgreement">
          <h1>用户协议</h1>
          <p>当您按照注册页面提示填写信息、阅读并同意本协议且完
            成全部注册程序后，或您按照激活页面提示填写信息、阅
            读并同意本协议且完成全部激活程序后，或您以其他皮皮
            陪玩允许的方式实际使用本服务时，即表示您已充分阅
            读、理解并接受本协议的全部内容，本协议即产生法律约
            束力。您承诺接受并遵守本协议的约定，届时您不应以未
            阅读本协议的内容或者未获得xxx对您问询的解答等理
            由，主张本协议无效或要求撤销本协议。</p>
        </div>
    </van-popup>
    <van-popup class="van-popup"
        v-model="law"
        round
        position="bottom"
        :style="{ height: '80%' }">
        <div class="userAgreement">
          <h1>法律声明</h1>
          <p>当您按照注册页面提示填写信息、阅读并同意本协议且完
            成全部注册程序后，或您按照激活页面提示填写信息、阅
            读并同意本协议且完成全部激活程序后，或您以其他皮皮
            陪玩允许的方式实际使用本服务时，即表示您已充分阅
            读、理解并接受本协议的全部内容，本协议即产生法律约
            束力。您承诺接受并遵守本协议的约定，届时您不应以未
            阅读本协议的内容或者未获得xxx对您问询的解答等理
            由，主张本协议无效或要求撤销本协议。</p>
        </div>
    </van-popup>
    <van-popup class="van-popup"
        v-model="experience"
        round
        position="bottom"
        :style="{ height: '80%' }">
        <div class="userAgreement">
          <h1>用户体验</h1>
          <p>当您按照注册页面提示填写信息、阅读并同意本协议且完
            成全部注册程序后，或您按照激活页面提示填写信息、阅
            读并同意本协议且完成全部激活程序后，或您以其他皮皮
            陪玩允许的方式实际使用本服务时，即表示您已充分阅
            读、理解并接受本协议的全部内容，本协议即产生法律约
            束力。您承诺接受并遵守本协议的约定，届时您不应以未
            阅读本协议的内容或者未获得xxx对您问询的解答等理
            由，主张本协议无效或要求撤销本协议。</p>
        </div>
    </van-popup>
    <van-popup class="van-popup"
        v-model="Privacy"
        round
        position="bottom"
        :style="{ height: '80%' }">
        <div class="userAgreement">
          <h1>隐私协议</h1>
          <p>当您按照注册页面提示填写信息、阅读并同意本协议且完
            成全部注册程序后，或您按照激活页面提示填写信息、阅
            读并同意本协议且完成全部激活程序后，或您以其他皮皮
            陪玩允许的方式实际使用本服务时，即表示您已充分阅
            读、理解并接受本协议的全部内容，本协议即产生法律约
            束力。您承诺接受并遵守本协议的约定，届时您不应以未
            阅读本协议的内容或者未获得xxx对您问询的解答等理
            由，主张本协议无效或要求撤销本协议。</p>
        </div>
    </van-popup>
  </div>
</template> 

<script>
import tebber from "@/components/tabber";
import { Uploader } from 'vant';
export default {
  name: "",
  props: {},
  components: {
    tebber,
  },
  data() {
    return {
      active: 2,
      user:false,
      law:false,
      experience:false,
      Privacy:false,
      value:0,
      show:false,
      userPhoto: '',
    };
  },
  methods: {
      userEvt(){
          this.user = true
      },
       lawEvt(){
          this.law = true
      },
      experienceEvt(){
          this.experience = true
      },
      PrivacyEvt(){
        this.Privacy = true
      },
      orderEvt(){
        this.$router.push({path:'/my/order',query:{active:0}})
      },
      signEvt(){
        this.$router.push({ path: '/my/Sign'})
      },
      orderEvent(){
        this.$router.push({path:'/my/order2',query:{active:0}})
      },
      payEvt(){
        this.$router.push({path:'/my/order',query:{active:1}})
      },
      goodsEvt(){
         this.$router.push({path:'/my/order',query:{active:2}})
      },
      receivingEvt(){
        this.$router.push({path:'/my/order',query:{active:3}})
      },
      afterEvt(){
        this.$router.push({path:'/my/order',query:{active:4}})
      },
      news(){
        this.$router.push({path: '/my/news'})
      },
      payEvt2(){
        this.$router.push({path:'/my/order2',query:{active:1}})
      },
      writeEvt(){
        this.$router.push({path:'/my/order2',query:{active:2}})
      },
      finishEvt(){
        this.$router.push({path:'/my/order2',query:{active:3}})
      },  
      afterEvt2(){
        this.$router.push({path:'/my/order2',query:{active:4}})
      },
      headEvt(){
        this.show = true;
      },
       afterRead(file) {
      // 此时可以自行将文件上传至服务器
      console.log(file);
    },
    contactEvt(){
      this.$router.push({path: '/my/Contact'})
    }
},
  beforeMount(){
    let a = localStorage.getItem('value')
    this.value = Number(a)
  }
};
</script>

<style lang='scss' scoped>
@import "../../style/common.sass";

.bigBox {
  background: #e5e5e5;
}
.container {
  width: 100%;
  // height: 13.49rem;
  background: $bgc-a;
  position: relative;
  overflow: hidden;
  .head {
    width: 6.67rem;
    height: 5.2rem;
  }
  .icon {
    width: 3.24rem;
    height: 3.24rem;
    border: 3px solid #fff;
    border-radius: 50%;
    position: absolute;
    left: 0.7rem;
    top: 0.7rem;
    background: url("../../assets/logo.jpg") no-repeat center center;
    background-size: 100% 100% ;
  }
  .wxName {
    display: block;
    position: absolute;
    left: 5rem;
    top: 0.9rem;
    color: #fff;
    font-size: 0.9rem;
  }
  .integral {
    color: #fff;
    position: absolute;
    top: 2.6rem;
    left: 5rem;
    font-size: 0.7rem;
  }
  .headList {
    width: 100%;
    height: 4rem;
    display: flex;
    justify-content: space-around;
    dt {
      color: #fff;
      text-align: center;
      margin-bottom: 0.6rem;
      font-size: 0.9rem;
    }
    dd {
      color: #fff;
      font-size: 0.9rem;
    }
  }
  .orderList {
    width: 100%;
    height: 8rem;
    background: #fff;
    border-top-right-radius: 6%;
    border-top-left-radius: 6%;
    overflow: hidden;
    .list {
      width: 100%;
      height: 2.6rem;
      display: flex;
      justify-content: space-between;
      padding-top: 1.08rem;
      padding-left: 0.86rem;
      margin-bottom: 0.77rem;
      .product {
        font-size: 0.9rem;
        font-weight: 600;
      }
      .all {
        line-height: 1.6rem;
        font-size: 0.7rem;
        padding-right: 1.8rem;
        padding-top: 0.03rem;
        background: url("../../assets/bg.jpg") no-repeat 3.7rem center;
      }
    }
    .productList {
      width: 100%;
      height: 3.6rem;
      display: flex;
      justify-content: space-around;
      dl {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        dt {
          text-align: center;
          img {
            width: 1.62rem;
            height: 1.62rem;
          }
        }
        dd {
          font-size: 0.21rem;
        }
      }
    }
  }
  .order {
    border-radius: 0;
  }
  .line {
    display: block;
    width: 100%;
    height: 1.33rem;
    background-color: #e5e5e5;
  }
  .nameList {
    width: 100%;
    height: 29.36rem;
    background: #fff;
    position: relative;
    ul {
      width: 100%;
      height: 25rem;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      li {
        font-size: 0.76rem;
        width: 100%;
        height: 2.47rem;
        line-height: 2.47rem;
        border-bottom: 1px solid #e5e5e5;
        padding-left: 1.5rem;
        position: relative;
        background: url("../../assets/bg.jpg") no-repeat 22rem center;
        img {
          width: 1.3rem;
          height: 1.3rem;
          position: absolute;
          left: 0.03rem;
          top: 20%;
        }
      }
    }
  }
}
.van-popup{
  .userAgreement{
    h1{
      text-align: center;
    }
    p{
      text-indent: 2em;
      font-size: .87rem;
      line-height: 2rem;
      margin-top: 1.13rem;
    }
  }
}
</style>